<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner">
			<swiper-item class="banner">
				<image src="/static/index/1.png.png" mode="widthFix" class="banner"></image>
			</swiper-item>
		</swiper>
		
		<view class="bz p-2 bg-white d-flex flex-nowrap a-center">
			<view class="list_bar flex-1" v-for="(item,index) in 5" :key="index">
				<image :src="'/static/order/'+(index+2)+'.png'" class="icons" mode=""></image>
				<view class="type_name">分类</view>
			</view>
		</view>
		<view class="bz p-2 d-flex flex-wrap">
			<view class="list b-radius2 bg-white mb-2" @click="toDetail(item)" v-for="item,index in 16" :key="index" :class="index%2==0 ? 'c1':'c2'">
				<image src="/static/index/1.png.png" class="imgs" mode="aspectFill"></image>
				<view class="bz p-2">
					<view class="title text-2">及活力保健高</view>
					<view class="d-flex flex-nowrap a-center j-sb">
						<view class="price">￥299</view>
						<view class="num">销量:10</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				height:'',
				tab:['门店','员工'],
				tabIndex:0
			}
		},
		onLoad() {
			_this=this;
			uni.getSystemInfo({
				success: function (res) {
					console.log(res.windowHeight)
					_this.height=res.windowHeight
				}
			});
		},
		methods: {
			checkOne(e){
				this.tabIndex=e;
			},
			navTo(e){
				uni.navigateTo({
					url:e
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.list_bar{
	padding: 30rpx 0;
	.icons{
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		display: block;
		margin: 0 auto;
	}
	.type_name{
		font-size: 26rpx;
		color: #666;
		text-align: center;
		padding-top: 30rpx;
	}
}
.banner{
		height: 400rpx;
		width: 100%;
	}

.c1{
		margin-right: 2%;
	}
	.c2{
		margin-left: 2%;
	}
	.list{
		width: 48%;
		.imgs{
			width: 100%;
			height: 280rpx;
		}
		.title{
			height: 80rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #101010;
			font-weight: bold;
		}
		.price{
			font-size: 25rpx;
			color: red;
			font-weight: bold;
		}
		.num{
			font-size: 25rpx;
			color: #666;
			text-align: right;
		}
	}


</style>
